<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
            label-width="68px">
            <!-- <el-form-item label="供应商编码" prop="date">
            <el-input v-model="queryParams.providerCode" placeholder = "请输入供应商编码"></el-input>
        </el-form-item> -->
            <el-form-item label="日期" prop="date">
                <el-date-picker clearable v-model="dateTime" style="width:335px" type="datetimerange"
                    start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="请选择创建时间"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> -->
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="messageList" @selection-change="handleSelectionChange">
            <!-- <el-table-column type="selection" width="55" align="center" /> -->
            <!-- <el-table-column prop="index" label="序号" width="55" align="center"></el-table-column> -->

            <el-table-column type="index" label="序号" width="46" align="center">
            </el-table-column>
            <el-table-column label="订单id" align="center" prop="GS_ORDER_TEMPID" width="160" />
            <el-table-column label="下单仓库" align="center" prop="warehouseName" />
            <el-table-column label="下单时间" align="center" prop="GS_ORDER_CREATE_DATE"
                :show-overflow-tooltip="showOverflowTooltip" />
            <el-table-column label="仓库地址" align="center" prop="GS_DELIVER_GOODS_ADDR" width="200"
                :show-overflow-tooltip="showOverflowTooltip" />
            <el-table-column label="产品编码" align="center" prop="GS_CONCENTRICITY_ID" width="160" />
            <el-table-column label="产品名称" align="center" prop="productName"
                :show-overflow-tooltip="showOverflowTooltip" />
            <el-table-column label="型号" align="center" prop="MODEL" :show-overflow-tooltip="showOverflowTooltip" />
            <el-table-column label="规格" align="center" prop="SPEC" :show-overflow-tooltip="showOverflowTooltip" />
            <el-table-column label="品牌" align="center" prop="PRODUCT_BRAND"
                :show-overflow-tooltip="showOverflowTooltip" />
            <el-table-column label="数量" align="center" prop="GS_ORDER_COUNT"
                :show-overflow-tooltip="showOverflowTooltip" />
            <el-table-column label="单价" align="center" prop="GS_GOODS_UNITPRICE"
                :show-overflow-tooltip="showOverflowTooltip" />
            <el-table-column label="送达时间" align="center" prop="GS_DELIVER_GOODS_DATE" />
            <el-table-column label="订单状态" align="center" prop="GS_ORDER_DETAIL_STATUS">
                <template slot-scope="scope">
                    <span v-if="scope.row.GS_ORDER_DETAIL_STATUS == 9">订货中</span>
                    <span v-if="scope.row.GS_ORDER_DETAIL_STATUS == 10">已确认</span>
                    <span v-if="scope.row.GS_ORDER_DETAIL_STATUS == 11">已拒绝</span>
                    <span v-if="scope.row.GS_ORDER_DETAIL_STATUS == 12">交货确认</span>
                    <span v-if="scope.row.GS_ORDER_DETAIL_STATUS == 21">已取消</span>
                    <span v-if="scope.row.GS_ORDER_DETAIL_STATUS == 22">已作废</span>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />

    </div>
</template>

<script>
import { orderGsOrderApi } from "@/api/system/message";

export default {
    name: "OrderInquiry",
    data() {
        return {
            showOverflowTooltip: true,
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 公告通知表格数据
            messageList: [],
            dateTime: [this.formatDate(new Date(new Date().getFullYear(), new Date().getMonth(), 1, 0, 0, 0, 0)), this.formatDate(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 23, 59, 59, 999))],

            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                provide: "",
                startTime: "",
                endTime: "",

            },
            // 表单参数
            form: {


            },
            createTime: null,
            // 表单校验
            rules: {
            }
        };
    },
    created() {
        try {
            this.queryParams.provide = JSON.parse(localStorage.getItem('User')).dept.deptName;
            this.getList();
        } catch (error) {

        }
    },
    methods: {
        /** 查询公告通知列表 */
        getList() {
            if (this.dateTime && this.dateTime.length === 2) {
                // 日期格式转换
                this.queryParams.startTime = this.dateTime[0];
                this.queryParams.endTime = this.dateTime[1];
            } else {
                this.queryParams.startTime = "";
                this.queryParams.endTime = "";
            }

            this.loading = true;
            orderGsOrderApi(this.queryParams).then(response => {
                this.messageList = response.data
                this.total = response.total;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },

        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                provide: "",
                startTime: "",
                endTime: "",
            }
            this.resetForm("queryForm");
            this.dateTime = [this.formatDate(new Date(new Date().getFullYear(), new Date().getMonth(), 1, 0, 0, 0, 0)), this.formatDate(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 23, 59, 59, 999))];
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },


        // 日期转换
        formatDate(date) {
            const year = date.getFullYear();
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            const day = date.getDate().toString().padStart(2, '0');
            const hours = date.getHours().toString().padStart(2, '0');
            const minutes = date.getMinutes().toString().padStart(2, '0');
            const seconds = date.getSeconds().toString().padStart(2, '0');
            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        },
    }
};
</script>